<template>
	<view class="login_container">
		<!-- banner -->
		<view class="banner_img_box">
			<image :src="loginBanner" mode="widthFix" class="banner_img"></image>
		</view>

		<view class="form_box">
			<!-- 验证码登录 -->
			<view class="form_all" v-if="changeBtn == 0">
				<view class="form_title">手机号快捷登录</view>

				<u-form :model="loginForm" ref="formLogin">
					<view class="form_input_box">
						<view class="input_top_box">
							<view class="top_icon_box">
								<image src="/static/login/icon-phone.png" mode="" class="top_icon"></image>
							</view>
							<view class="top_title">手机号</view>
						</view>
						<view class="">
							<u-form-item label="" prop="phoneNum" class="phont_input_line">
								<u-input v-model="loginForm.phoneNum" placeholder="请输入手机号" placeholder-style="font-family: all-font;" maxlength="11" :clearable="false" />
							</u-form-item>
						</view>
					</view>

					<view class="form_input_box">
						<view class="input_top_box">
							<view class="top_icon_box">
								<image src="/static/login/icon-code.png" mode="" class="top_icon"></image>
							</view>
							<view class="top_title">验证码</view>
						</view>
						<view class="code_input">
							<u-form-item label="" prop="phoneCode">
								<u-input
									v-model="loginForm.phoneCode"
									placeholder="请输入验证码"
									placeholder-style="font-family: all-font;"
									:clearable="false"
									@blur="handlerCodeBlur"
								/>
							</u-form-item>
							<view class="" style="display: flex; justify-content: flex-end">
								<button class="code_btn" size="mini" type="primary" :disabled="btnDis" @tap="sendCode">
									{{ !codeTime ? '获取验证码' : codeTime + 's' + '后重新发送' }}
								</button>
							</view>
						</view>
					</view>
					<!-- <view class="register_tip_box" @click="handleUserRegister">
						<view class="register_tip">
							<span class="forget_title">没有账号？</span>去注册
						</view>
					</view> -->
					<!-- 我已阅读 -->
					<view class="read_box">
						<u-form-item label="" class="input_read">
							<u-checkbox-group @change="checkboxGroupChange">
								<view class="" style="display: flex; align-items: center; font-family: all-font">
									<u-checkbox v-model="loginForm.radioRead" v-for="(item, index) in readList" :key="index" :name="item.name" style="font-family: all-font">
										{{ item.name }}
									</u-checkbox>

									<span style="font-size: 22rpx; font-weight: 400; color: #237eff" @click="handlerRead(0)">《用户服务协议》</span>
									及
									<span style="font-size: 22rpx; font-weight: 400; color: #237eff" @click="handlerRead(1)">《隐私协议》</span>
								</view>
							</u-checkbox-group>
						</u-form-item>
					</view>
				</u-form>
			</view>

			<!-- 验证码登录 -->
			<view class="form_all" v-else>
				<view class="form_title">密码登录</view>
				<u-form :model="loginForm" ref="formLogin">
					<view class="form_input_box">
						<view class="input_top_box">
							<view class="top_icon_box">
								<image src="/static/login/icon-phone.png" mode="" class="top_icon"></image>
							</view>
							<view class="top_title">手机号</view>
						</view>
						<view class="">
							<u-form-item label="" prop="phoneNum">
								<u-input v-model="loginForm.phoneNum" placeholder="请输入手机号" placeholder-style="font-family: all-font;" maxlength="11" :clearable="false" />
							</u-form-item>
						</view>
					</view>

					<view class="form_input_box">
						<view class="input_top_box">
							<view class="top_icon_box">
								<image src="/static/login/icon-code.png" mode="" class="top_icon"></image>
							</view>
							<view class="top_title">密码</view>
						</view>
						<view class="">
							<u-form-item label="" prop="password">
								<u-input
									v-model="loginForm.password"
									type="password"
									:password-icon="false"
									placeholder="请输入密码"
									placeholder-style="font-family: all-font;"
									:clearable="false"
								/>
							</u-form-item>
						</view>
					</view>

					<view class="" style="display: flex; justify-content: space-between">
						<view class="register_tip_box" @click="handleRetrievePwd">
							<view class="register_tip">
								<span class="forget_title">忘记密码？</span>
								找回密码
							</view>
						</view>
						<!-- <view class="register_tip_box" @click="handleUserRegister">
							<view class="register_tip">
								<span class="forget_title">没有账号？</span>去注册
							</view>
						</view> -->
					</view>

					<view class="read_box">
						<u-form-item label="" class="input_read">
							<u-checkbox-group @change="checkboxGroupChange">
								<view class="" style="display: flex; align-items: center; font-family: all-font">
									<u-checkbox v-model="loginForm.radioRead" v-for="(item, index) in readList" :key="index" :name="item.name" style="font-family: all-font">
										{{ item.name }}
									</u-checkbox>
									<span style="font-size: 22rpx; font-weight: 400; color: #237eff" @click="handlerRead(0)">《用户服务协议》</span>
									及
									<span style="font-size: 22rpx; font-weight: 400; color: #237eff" @click="handlerRead(1)">《隐私协议》</span>
								</view>
							</u-checkbox-group>
						</u-form-item>
					</view>
				</u-form>
			</view>

			<view class="btn_box">
				<view class="login_btn" @click="handlerLogin">登 录</view>
				<view class="change_btn" @click="handlerChangeBtn(changeBtn)">切换{{ changeBtn == 1 ? '手机号快捷登录' : '密码登录' }}</view>
				<!-- 	<view class="">
					<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"
						class="login_empower_btn">一键授权登录</button>
				</view> -->
			</view>
		</view>

		<!-- 用户服务协议及隐私政策 -->
		<agreement ref="refAgreement" :agreementType="agreementType"></agreement>
	</view>
</template>

<script>
// import VConsole from 'vconsole';
import Agreement from './components/agreement.vue';
export default {
	components: {
		Agreement
	},
	data() {
		return {
			loginTitleList: [
				{
					id: '0',
					title: '登录'
				},
				{
					id: '1',
					title: '注册'
				}
			],
			isActive: 0,
			loginForm: {
				phoneNum: '',
				phoneCode: '',
				password: '',
				surePassword: '',
				radioRead: false
			},
			rules: {
				phoneNum: [
					{
						required: true,
						message: '请输入手机号',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}
				],
				phoneCode: [
					{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur']
					}
				],

				password: [
					{
						required: true,
						min: 6,
						message: '请输入不少于6位数的密码',
						trigger: ['change', 'blur']
					}
				],
				surePassword: [
					{
						required: true,
						min: 6,
						message: '请输入不少于6位数的密码',
						trigger: ['change', 'blur']
					}
				]
			},
			readList: [
				{
					name: '我已阅读',
					disabled: false
				}
			],
			tips: '',
			// refCode: null,
			seconds: 60,
			btnDis: false, // 发送验证码按钮不禁用
			btnText: '发送验证码', // 提示
			agentId: '',
			shareId: '',
			codeTime: 0,
			isShowUserAgreement: false,
			agreementDetail: '',
			isShowPassword: false,
			changeBtn: '0',
			pid: '',
			isWeixin: false,
			loginBanner: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/xcx_static/65fe2e5a81a02_1711156826.png',
			agreementType: ''
		};
	},
	onShow() {},
	onLoad(option) {
		// const vConsole = new VConsole();
		// this.isWeixin = this.isWechat()
	},
	methods: {
		// 判断是否是微信浏览器打开
		isWechat() {
			return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === 'micromessenger';
		},

		// 用户授权手机号注册接口
		xcxUserLogin(val) {
			const that = this;
			this.$request(
				'/xcxUserLoginV2',
				{
					code: val.code
				},
				'GET'
			).then((res) => {
				if (res.code == 1) {
					uni.setStorageSync('h5-token', res.data.token);
					uni.setStorageSync('userInfo', res.data.userInfo);
					uni.setStorageSync('h5-isAgent', res.data.userInfo.is_agent);
					let phone = res.data.userInfo.is_agent == 1 ? res.data.userInfo.mobile : res.data.userInfo.phone;
					let isAgent = res.data.userInfo.is_agent == 1 ? 1 : 0;
					// that.userTokenNew = uni.getStorageSync('h5-token')
					uni.login({
						provider: 'weixin', //使用微信登录
						success: function (loginRes) {
							that.xcxGetUserInfo(loginRes.code, phone, isAgent);
							uni.showToast({
								title: res.msg,
								icon: 'none',
								success: (res) => {
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/index/index'
										});
									}, 1200);
								}
							});
						}
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		},

		// 用户手机号授权
		onGetPhoneNumber(e) {
			if ((e.detail.errMsg = 'getPhoneNumber:ok')) {
				this.xcxUserLogin(e.detail);
			} else {
				return;
			}
		},

		// 用户协议和隐私政策
		handlerRead(val) {
			this.agreementType = val;
			if (val == 0) {
			} else {
			}
			this.$refs.refAgreement.isShowUserAgreement = true;
			// this.isShowUserAgreement = true
		},

		checkboxGroupChange(e) {},

		// 发送验证码
		sendCode() {
			if (this.loginForm.phoneNum == '') {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				});
				return;
			} else {
				// 开启倒计时
				this.countDown();
			}
		},

		// 验证码倒计时
		countDown() {
			if (this.codeTime > 0) {
				uni.showToast({
					title: '不能重复获取',
					icon: 'none'
				});
				return;
			} else {
				this.getSms();
			}
			// 初始化定时器
			// let t = null;
			// // 倒计时1分钟
			// let timer = 60;
			// // 按钮禁用
			// this.btnDis = true;
			// // 计时器清零
			// clearInterval(t);
			// // 按钮显示时间
			// this.btnText = `${timer}s`;
			// t = setInterval(() => {
			// 	// 当倒计时完时，显示重新发送,按钮开启
			// 	if (timer == 0) {
			// 		clearInterval(t);
			// 		this.btnText = "重新发送";
			// 		this.btnDis = false;
			// 		return;
			// 	}
			// 	// 实现倒计时效果
			// 	timer--;
			// 	this.btnText = `${timer}s`;
			// }, 1000)
		},

		// 发送验证码接口
		getSms() {
			const that = this;
			this.$request(
				'/fxuserGetSmsCode',
				{
					phone: this.loginForm.phoneNum
				},
				'POST'
			).then((res) => {
				if (res.code == 1) {
					uni.showToast({
						title: '发送成功',
						icon: 'none'
					});
					that.codeTime = 60;
					let timer = setInterval(() => {
						that.codeTime--;
						if (that.codeTime < 1) {
							clearInterval(timer);
							that.codeTime = 0;
						}
					}, 1000);
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					that.codeTime = 0;
					return;
				}
			});
		},

		// 密码登录
		passwordLogin() {
			const that = this;
			this.$request(
				'/userLoginPwV2',
				{
					phone: this.loginForm.phoneNum,
					password: this.loginForm.password
				},
				'POST'
			).then((res) => {
				if (res.code == 1) {
					uni.setStorageSync('h5-token', res.data.token);
					uni.setStorageSync('userInfo', res.data.userInfo);
					uni.setStorageSync('h5-isAgent', res.data.userInfo.is_agent);
					uni.login({
						provider: 'weixin', //使用微信登录
						success: function (loginRes) {
							that.xcxGetUserInfo(loginRes.code, that.loginForm.phoneNum, res.data.userInfo.is_agent);
						}
					});
					uni.showToast({
						title: res.msg,
						icon: 'none',
						success: (res) => {
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								});
							}, 1500);
						}
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		},

		// 短信登录
		smsLogin() {
			const that = this;
			this.$request(
				'/userLoginYzmV2',
				{
					phone: this.loginForm.phoneNum,
					code: this.loginForm.phoneCode
				},
				'POST'
			).then((res) => {
				if (res.code == 1) {
					uni.setStorageSync('h5-token', res.data.token);
					uni.setStorageSync('userInfo', res.data.userInfo);
					uni.setStorageSync('h5-isAgent', res.data.userInfo.is_agent);
					uni.login({
						provider: 'weixin', //使用微信登录
						success: function (loginRes) {
							that.xcxGetUserInfo(loginRes.code, that.loginForm.phoneNum, res.data.userInfo.is_agent);
						}
					});
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}, 1500);
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		},

		// 微信登录接口-code
		xcxGetUserInfo(val, phone, isAgent) {
			this.$request(
				'/xcxGetUserInfo',
				{
					code: val,
					phone: phone,
					is_agent: isAgent
				},
				'GET'
			).then((res) => {
				uni.setStorageSync('userWxOpenid', res.data);
			});
		},

		// 跳转找回密码
		handleRetrievePwd() {
			uni.navigateTo({
				url: '/pages/retrievePassword/retrievePassword'
			});
		},

		// 跳转注册页面
		handleUserRegister() {
			let llgSceneObj = uni.getStorageSync('llgSceneObj');
			if (llgSceneObj) {
				uni.navigateTo({
					url: '/pages/distributorsRegister/llgRegister'
				});
			} else {
				uni.navigateTo({
					url: '/pages/distributorsRegister/distributorsRegister'
				});
			}
		},

		// 验证码输入监听
		handlerCodeBlur(e) {},

		// 登录
		handlerLogin() {
			const that = this;
			if (this.loginForm.radioRead == []) {
				uni.showToast({
					title: '请勾选我已阅读',
					icon: 'none'
				});
				return;
			}

			this.$refs.formLogin.validate((valid) => {
				const that = this;
				if (valid) {
					if (that.changeBtn == '1') {
						that.passwordLogin();
					} else if (that.changeBtn == '0') {
						that.smsLogin();
					}
				} else {
			}
			});
		},

		// 切换按钮
		handlerChangeBtn(val) {
			if (val == 0) {
				this.changeBtn = 1;
				this.$refs.formLogin.resetFields();
			} else {
				this.changeBtn = 0;
				this.$refs.formLogin.resetFields();
			}
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.formLogin.setRules(this.rules);
	}
};
</script>

<style lang="scss" scoped>
.login_container {
	.banner_img_box {
		position: relative;
		width: 100%;

		.banner_img {
			width: 100%;
			height: 100%;
		}
	}

	.form_box {
		position: absolute;
		top: 400rpx;
		width: 100%;
		// height: 943rpx;
		background: #ffffff;
		opacity: 0.9;
		border-radius: 30rpx 30rpx 0px 0px;
		padding: 54rpx 79rpx 53rpx;

		.form_title {
			font-size: 36rpx;
			font-family: all-font;
			font-weight: 400;
			color: #1a1a1a;
			text-align: center;
		}

		.form_input_box {
			padding-top: 61rpx;

			.input_top_box {
				display: flex;
				align-items: center;

				.top_icon_box {
					width: 32rpx;
					height: 32rpx;

					.top_icon {
						width: 100%;
						height: 100%;
					}
				}

				.top_title {
					font-size: 32rpx;
					font-family: all-font;
					font-weight: 500;
					color: #333333;
					padding-left: 23rpx;
				}
			}

			.code_input {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.code_btn {
					height: 60rpx;
					font-family: all-font;
				}
			}
		}

		.register_tip_box {
			display: flex;
			justify-content: flex-end;
			font-family: all-font;
			padding-top: 18rpx;

			.forget_title {
				font-size: 22rpx;
				font-weight: 400;
				color: #ccc;
			}

			.register_tip {
				font-size: 22rpx;
				font-weight: 400;
				color: #3488fe;
			}
		}

		.input_read {
			::v-deep .u-radio__label {
				font-size: 22rpx;
				font-weight: 400;
				color: #808080;
			}
		}

		.btn_box {
			font-family: all-font;
			padding-top: 36rpx;

			.login_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 75rpx;
				background: linear-gradient(1deg, #55cdff, #5692ff);
				border-radius: 38rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #ffffff;
				margin-bottom: 31rpx;
			}

			.login_empower_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 75rpx;
				background: #30b42f;
				border-radius: 38rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #ffffff;
				margin-top: 31rpx;
			}

			.change_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 75rpx;
				background: #e2f2ff;
				border-radius: 38rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #3488fe;
			}
		}
	}
}
</style>
